<template>
	<view class="content">
		<view class="content-parts">
			<view v-for="(item,index) in nowIndex" :key="index" class="content-part" @click="change(index)">
				<view :class="['over-one',showList == index?'sel-list':'']" style="max-width: 100%;">
					<template v-if=" index != 'area' ">
						<template v-if="!filterData[index][item].value">

							<text v-show="index == 'mediation'">
								房产中介
							</text>

						</template>
						<template v-else>
							{{filterData[index][item].text }}
						</template>

					</template>
					<template v-else>
						<template v-if="item.length == 1 && item[0]">
							{{filterData[index][item[0]].text }}
						</template>
						<template v-else-if="item.length == 2">
							{{filterData[index][item[0]].child[item[1]].text }}
						</template>
						<template v-else-if="item.length == 3">
							{{filterData[index][item[0]].child[item[1]].child[item[2]].text }}
						</template>
						<template v-else>
							区域
						</template>
					</template>

				</view>
				<u-icon name="arrow-down-fill" size="20" :color="showList == index ? '#21aaff' :'#d4d4d4' " :class="['uIcon', showList == index ?'selIcon':'' ]"></u-icon>
			</view>
		</view>

		<view class="divider"> </view>
		<view class="showSelectList" v-if="showList">
			<view v-show="showList ==  'acreage' " class="showSelectList-title">
				面积
			</view>
			<view v-show="showList ==  'price' " class="showSelectList-title">
				价格 <text class="showSelectList-title-small">单位：元/㎡/月</text>
			</view>
			<view v-show="showList ==  'decorate' " class="showSelectList-title">
				装修
			</view>

			<view style="width: 100%;" v-if="showList ===  'area' ">
				<Area :areaData="filterData['area']" :value="nowIndex['area']" />
			</view>
			<view class="showSelectList-view" v-else-if="showList !=  'area' ">
				<view :class="['showSelectList-part',index == nowIndex[showList]?'showSelectList-part-sel':'']" v-for="(item,index) in filterData[showList]"
				 :key="index" @click="selectCheck(index)">
					{{item.text}}
				</view>

				<!-- <view v-for="index of lineShow-(filterData[showList].length%lineShow)" v-show="filterData[showList].length%lineShow > 0"
				 :key="index" style="width: 30%;">

				</view> -->

			</view>






		</view>












	</view>
</template>

<script>
	import Area from "./area.vue"
	export default {
		components: {
			Area
		},
		props: {
			defaultIndex: { //默认选中
				type: Object,
				default: { //默认值
					'area': [0],
					'mediation': 0,

				}
			},
			filterData: {
				type: Object,
				default: {
					'mediation': [{ //房产中介
							text: '不限',
							value: '',
						},
						{
							text: '找商办',
							value: 1,
						}
					],
					'area': [{ //区域
							text: '不限',
							value: '',

						},
						{
							text: '中山',
							value: '1',
							'child': [{
									text: '西区街道',
									value: 1,
									child: [{
											'text': '烟洲社区',
											'value': 3
										},
										{
											'text': '广丰社区',
											'value': 4
										}
									]
								}, {
									text: '东区街道',
									value: 2,
									child: [{
											'text': '竹苑社区',
											'value': 5
										},
										{
											'text': '夏洋社区',
											'value': 6
										}
									]
								},
								{
									text: '东区街道',
									value: 2,
									child: [{
											'text': '竹苑社区',
											'value': 5
										},
										{
											'text': '夏洋社区',
											'value': 6
										}
									]
								},
								{
									text: '东区街道',
									value: 2,
									child: [{
											'text': '竹苑社区',
											'value': 5
										},
										{
											'text': '夏洋社区',
											'value': 6
										}
									]
								},
							]
						}

					]
				},
			},


		},

		data() {
			return {
				showList: '', //点了哪个
				nowIndex: {},
				lineShow: 3, //一行显示几个
			}
		},
		created() {
			this.nowIndex = this.defaultIndex
		},
		watch: {
			showList() {
				if (this.showList) {
					// this.$parent.positionFixed = true
					this.$parent.curtain_show = true
				} else {
					// this.$parent.positionFixed = false
					this.$parent.curtain_show = false
				}
			}
		},

		methods: {
			change(index) {
				this.showList = this.showList == index ? '' : index
			},
			selectCheck(index) {
				this.nowIndex[this.showList] = index
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;

		// border: 1rpx solid red;

		.content-parts {
			display: flex;
			width: 100%;
			height: 80rpx;
			// border: 1rpx solid red;
			// padding-bottom: 20rpx;

			.content-part {
				// width: 25%;
				flex: 1;
				display: flex;
				// flex-direction: column;
				margin-top: 20rpx;
				justify-content: center;
				align-items: baseline;
				padding-left: 10rpx;
				padding-right: 10rpx;

				.uIcon {
					margin-left: 5rpx;
				}

				.sel-list {
					color: #21aaff;
				}

				.selIcon {
					transform: rotate(180deg);

				}
			}
		}

		.divider {
			margin-top: 10rpx;
			border-bottom: 1rpx solid #eaeaea;
		}

		.showSelectList {
			width: 100%;
			// height: 100rpx;
			// padding-bottom: 30rpx;
			position: relative;

			.showSelectList-title {
				width: 100%;
				margin-top: 30rpx;
				font-size: 32rpx;
				margin-left: 20rpx;

				.showSelectList-title-small {
					font-size: 20rpx;
					color: #bababa;
					margin-left: 20rpx;
				}
			}

			.showSelectList-view {
				width: 100%;
				display: flex;
				// flex-wrap: wrap; //放不开，换行

				// margin-top: 20rpx;
				flex-direction: column;
				font-size: 30rpx;
				// justify-content: space-around;
				// padding-bottom: 30rpx;

				.showSelectList-part {
					width: 100%;
					height: 100rpx;
					// background: #eeeeee;
					// margin-top: 30rpx;
					display: flex;
					border-bottom: 1rpx solid #f4f4f4;
					padding-left: 30rpx;
					// justify-content: center;
					align-items: center;
					font-size: 30rpx;
					// display: flex;
					// justify-content: space-between;
					// align-items: center;
					// padding: 0 10rpx 0 10rpx;
				}

				.showSelectList-part-sel {
					color: #21aaff;
				}

				// .showSelectList-part:not(:last-child) {
				// 	border-bottom: 1rpx solid #dedede;
				// }
			}

		}
	}
</style>
